<script setup lang="ts">
import * as pdfjs from 'pdfjs-dist'

const { url } = defineProps(['url'])
const emit = defineEmits(['loaded'])
const bookRef = ref()
const bookWidth = ref(0)
const bookHeight = ref(0)
const loaded = ref(false)
const pageImages = ref([])
const totalPages = ref(0)

async function pdfInit(url) {
  // 获取元素
  const pdfContainer = bookRef.value
  if (!pdfContainer) {
    return
  }

  const loadingTask = pdfjs.getDocument({
    url,
  })
  // 监听加载进度
  loadingTask.onProgress = function (progressData) {
    console.log(`Loading progress: ${progressData.loaded} / ${progressData.total}`)
  }
  const pdf = await loadingTask.promise
  totalPages.value = pdf.numPages
  // 创建一个数组来存储每一页的图片 URL
  for (let index = 0; index < pdf.numPages; index++) {
    const page = await pdf.getPage(index + 1)
    const viewport = page.getViewport({ scale: 2 })
    console.log(viewport)

    const divPage = document.createElement('div')
    divPage.classList.add('page')
    const divPageContent = document.createElement('div')
    divPageContent.classList.add('page-content')
    const canvas = document.createElement('canvas')
    canvas.width = viewport.width
    canvas.height = viewport.height
    bookWidth.value = viewport.width * 0.5
    bookHeight.value = viewport.height * 0.5
    const context = canvas.getContext('2d')
    if (!context) {
      return
    }
    const renderContext = {
      canvasContext: context,
      viewport,
    }
    await page.render(renderContext).promise
    // 将 canvas 转换为图片
    pageImages.value.push(canvas.toDataURL('image/jpeg', 1))
    if (pageImages.value.length >= totalPages.value) {
      // loadApp()
      nextTick(() => {
        // loaded.value = true
        // emit('loaded', true)
        loadApp()
      })
    }
    // divPageContent.appendChild(canvas)
    // divPage.appendChild(divPageContent)
    // container.appendChild(divPage)
  }
}

function loadApp() {
// Create the flipbook

  $(bookRef.value).turn({
    // Width

    width: bookWidth.value,
    display: 'single', // 显示：single=单页，double=双页，默认双页

    // Height

    height: bookHeight.value,

    // Elevation

    elevation: 50,

    // Enable gradients

    gradients: true,

    // Auto center this flipbook

    autoCenter: true,
    when: {
      // 监听事件
      async turning(e, page, view) {
        console.log(e, page, view)
        // 翻页前触发
      },
      turned(e, page) {
        console.log('翻页后', page, e)

        // 翻页后触发
      },
      released(a, b) {
        console.log('released', a, b)
      },
    },
  })
}
onMounted(async () => {
  await pdfInit(url)
})
</script>

<template>
  <div class="flipbook-viewport">
    <div ref="bookRef" class="flipbook">
      <el-image
        v-for="(item, index) in pageImages" v-show="pageImages.length === totalPages" :key="index"
        class="pointer-events-none" :src="item"
      />
      <!-- <div v-for="item in 10" :key="item" class="w-300px border-2px bg-#fff">
        page{{ item }}
      </div> -->
    </div>
  </div>
</template>

<style scoped>

</style>
